<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2021-11-17 09:31:50
 * @LastEditors: younghxp
 * @LastEditTime: 2022-03-08 17:04:05
-->
<template>
  <div class="container" ref="mainCon">
    <div class="title">
      <i class="icon iconfont iconfanhui1" @click="goBack"></i>
      <div class="descBox">
        <p class="companyname">
          {{ enterpriseInfo.companyName }}
          <span class="statusDescTheme fontColorTheme fontBorderTheme">{{
            typeName
          }}</span>
        </p>
        <p class="usccDesc">
          统一社会信用代码：{{ enterpriseInfo.uscc || '--' }}
        </p>
      </div>
    </div>
    <div class="spacing"></div>
    <el-row class="companyInfo">
      <el-col :span="8" class="elcol scoreBox">
        <div class="subBox">
          <p>
            <span class="score fontColorTheme">{{
              curEnterpriseInfo.score == null ? '--' : curEnterpriseInfo.score
            }}</span>
            <span class="unit fontColorTheme">分</span>
          </p>
          <p class="desc">动态信用分数</p>
        </div>
      </el-col>
      <el-col :span="8" class="elcol levelBox">
        <div class="subBox">
          <p class="score fontColorTheme">
            {{ curEnterpriseInfo.gradeLevel || '--' }}
          </p>
          <p class="desc">动态信用等级</p>
        </div>
      </el-col>
      <el-col :span="8" class="elcol searchDate">
        <div class="searchDate subBox dateTheme">
          <el-date-picker
            class="datePick"
            @change="changeDate"
            :picker-options="expireTimeOption"
            v-model="selectDate"
            :clearable="false"
            type="date"
            value-format="yyyy-MM-dd"
            prefix-icon="el-icon-arrow-down"
          ></el-date-picker>
          <p class="desc">评价日期</p>
        </div>
      </el-col>
    </el-row>
    <div class="spacing"></div>
    <div class="mainCon">
      <h3 class="titleDesc secondaryTitle secondaryTitleTheme">
        历史参评项目列表
      </h3>
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom name">
              <el-input
                placeholder="请输入项目名称"
                clearable
                v-model="filterField.projectName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目信用等级" class="row-padding-bottom">
              <el-select
                v-model="filterField.projectGradeLevel"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in selectLevel"
                  :key="item.id"
                  :label="item.name"
                  :value="item.gradeLevel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <el-button
                type="primary"
                icon="icon iconfont icondaochu"
                @click="getExportList"
                class="searchBtn"
              >
                <span>导出</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="项目名称" min-width="30">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectScore"
            label="动态信用分数"
            min-width="28"
            align="center"
            :formatter="formatTd"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            label="动态信用等级"
            min-width="28"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              {{
                scope.row.projectGradeLevel === 'O'
                  ? '其他'
                  : scope.row.projectGradeLevel
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="12"
            align="left"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetail(scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无企业评级相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'enterpriseHistoryScoreList',
  mixins: [scrollTable],
  data() {
    return {
      expireTimeOption: {
        disabledDate(date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          // 只能选择昨天以及以前
          return date.getTime() > Date.now() - 24 * 60 * 60 * 1000
        },
      },
      selectLevel: [],
      //表格数据
      tableList: [],
      requestUrl: 'api-ps/creditComProjScore/expand/getCompanyProjectScoreList',
      //搜索条件
      filterField: {
        type: '',
        uscc: '',
        year: '',
        month: '',
        day: '',
        projectName: '',
        projectGradeLevel: '',
      },
      pageSize: 20,
      pageNo: 1,
      selectDate: '',
      isShow: false,
      loading: false,
      enterpriseInfo: {},
      curEnterpriseInfo: {},
    }
  },
  async created() {
    this.filterField.type = this.$route.query.type
    this.filterField.uscc = this.$route.query.uscc
    const lastTime = Date.now() - 24 * 60 * 60 * 1000
    const year = new Date(lastTime).getFullYear()
    const month = new Date(lastTime).getMonth() * 1 + 1
    const day = new Date(lastTime).getDate()
    this.selectDate = year + '-' + month + '-' + day
    this.filterField.year = year
    this.filterField.month = month
    this.filterField.day = day
    this.getLevelList(this.filterField.type)
    this.getEnterpriseInfo(this.filterField)
    this.getCurEnterpriseInfo(this.filterField)
  },
  mounted() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  computed: {
    typeName() {
      let typeDesc
      switch (this.enterpriseInfo.type) {
        case '0':
          typeDesc = '建设方'
          break
        case '5':
          typeDesc = '施工方'
          break
        case '10':
          typeDesc = '分包单位'
          break
        default:
          typeDesc = '--'
          break
      }
      return typeDesc
    },
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    // 评分详情
    getEnterpriseInfo({ type, uscc, year, month, day } = filterField) {
      this.axios({
        method: 'post',
        url: 'api-ps/creditComProjScore/expand/getCompanyScore',
        data: {
          type,
          uscc,
          year,
          month,
          day,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.enterpriseInfo = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 当前日期评分详情
    getCurEnterpriseInfo({ type, uscc, year, month, day } = filterField) {
      this.axios({
        method: 'post',
        url: 'api-ps/creditCompanyScore/expand/history',
        data: {
          type,
          uscc,
          year,
          month,
          day,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.curEnterpriseInfo = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 获取评级配置
    getLevelList(type) {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditLevel/expand/getCreditLevelList',
        data: {
          type,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            const results = response.data.result
            results.forEach((v) => {
              v.name = v.gradeLevel
            })
            this.selectLevel = results
            const otherLevel = { gradeLevel: 'O', name: '其他' }
            this.selectLevel.push(otherLevel)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    changeDate(val) {
      const dateArr = val.split('-')
      this.filterField.year = dateArr[0]
      this.filterField.month = dateArr[1]
      this.filterField.day = dateArr[2]
      this.getEnterpriseInfo(this.filterField)
      this.getCurEnterpriseInfo(this.filterField)
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    },
    // 是否有导出数据
    getExports() {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditComProjScore/expand/getCompanyProjectScoreList',
        data: this.filterField,
      })
        .then((response) => {
          if (!response.data.hasError) {
            return response.data.result.results &&
              response.data.result.results.length > 0
              ? true
              : false
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    /**
     * @description: 导出
     */
    async getExportList() {
      const flag = await this.getExports()
      let {
        type,
        uscc,
        year,
        month,
        day,
        projectName,
        projectGradeLevel,
        sortField,
        sort,
      } = this.filterField
      const { companyName } = this.enterpriseInfo
      projectGradeLevel &&
        (projectGradeLevel = encodeURIComponent(projectGradeLevel))
      if (flag) {
        window.location.href =
          common.commonApi +
          'api-ps/creditComProjScore/expand/getCompanyProjectScoreList/export?uscc=' +
          uscc +
          '&companyName=' +
          companyName +
          '&type=' +
          type +
          '&year=' +
          year +
          '&month=' +
          month +
          '&day=' +
          day +
          '&projectName=' +
          projectName +
          '&projectGradeLevel=' +
          projectGradeLevel +
          '&sortField=' +
          sortField +
          '&sort=' +
          sort +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message.warning('暂无数据导出')
      }
    },
    toDetail(row) {
      let path = '/home/enterpriseScore/scoreDetail'
      let name = 'scoreDetail'
      if (this.isEsUser()) {
        path = '/home/enterpriseScore/ESscoreDetail'
        name = 'ESscoreDetail'
      }
      this.$router.push({
        path,
        name,
        query: {
          companyProjectScoreId: row.id,
          type: row.type,
          projectId: row.projectId,
          uscc: row.uscc,
          year: this.filterField.year,
          month: this.filterField.month,
          day: this.filterField.day,
          fromPath: 'enterpriseHistoryScoreList',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseScore/scoreList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goBack() {
      this.$router.push({
        path: '/home/enterpriseScore/scoreList',
        name: 'scoreList',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseScore/scoreList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  overflow-x: hidden;
  .title {
    height: 78px;
    font-size: 0;
    background-color: #fff;
    padding: 0 24px;
    .iconfanhui1 {
      display: inline-block;
      font-size: 18px;
      vertical-align: top;
      margin-top: 17px;
    }
    .descBox {
      display: inline-block;
      .companyname {
        font-size: 18px;
        color: #333;
        font-weight: 700;
        margin-top: 14px;
        .statusDescTheme {
          display: inline-block;
          height: 20px;
          font-size: 12px;
          color: #265faa;
          font-weight: 400;
          text-align: center;
          line-height: 20px;
          border: 1px solid #265faa;
          background-color: #fff;
          vertical-align: top;
          padding: 0 6px;
          margin-top: 3px;
          margin-left: 5px;
        }
      }
      .usccDesc {
        font-size: 14px;
        color: #666666;
        font-weight: 400;
        line-height: 28px;
      }
    }
  }
  .companyInfo {
    height: 96px;
    background-color: #fff;
    .elcol {
      height: 100%;
      text-align: center;
      padding: 20px 0;
      .subBox {
        height: 100%;
        border-right: 1px solid #ddd;
        .score {
          font-size: 28px;
          font-weight: 500;
          line-height: 38px;
        }
        .unit {
          font-size: 14px;
          font-weight: 600;
        }
        .desc {
          font-size: 12px;
          color: #999999;
          font-weight: 400;
        }
      }
      &:last-child {
        padding: 10px 24px;
        .subBox {
          background-color: #f5f7fa;
          border: none;
          .datePick {
            margin-top: 10px;
          }
          /deep/ .el-input__prefix {
            font-size: 16px;
            left: 180px;
          }
          /deep/ .el-input__inner {
            font-size: 24px;
            font-weight: 500;
            text-align: center;
            border: none;
            background-color: transparent;
          }
        }
      }
    }
  }
  .mainCon {
    margin-top: 24px;
    padding-top: 0;
    .titleDesc {
      margin-left: 24px;
      margin-bottom: 24px;
    }
    .tableBoxCur {
      padding-top: 0;
    }
  }
}
@import '../../../static/css/filterArea.less';
</style>
